<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%"
             append-to-body>

    <el-form ref="formRef"
             :model="formModel"
             :rules="formRules"
             label-width="120px">
      <el-form-item label="方案名称："
                    prop="name">
        <el-input v-model="formModel.name"
                  placeholder="请输入方案名称"
                  maxlength="30"
                  class="w-200"
                  show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-card class="div-box">
          <div><span class="required">*</span>1.检测人数不低于<el-input v-model="formModel.freeCheckCount"
                      placeholder="请输入人次"
                      class="w-200"></el-input>人次;
          </div>
          <div><span class="required">*</span>2.提供<el-input v-model="formModel.readCount"
                      placeholder="请输入医生解读报告"
                      class="w-200"></el-input>次免费医生解读报告；
          </div>
          <div><span class="required">*</span>3.提供<el-input v-model="formModel.consultCount"
                      placeholder="请输入远程咨询"
                      class="w-200"></el-input>次免费医生远程咨询；
          </div>
          <div><span class="required">*</span>4.提供<el-input v-model="formModel.marketingCount"
                      placeholder="请输入精准营销"
                      class="w-200"></el-input>次C端精准营销；
          </div>
          <div><span class="required">*</span>5.提供店员产品知识考试功能；</div>
          <div><span class="required">*</span>6.提供<el-input v-model="formModel.doctorCount"
                      placeholder="请输入名额"
                      class="w-200"></el-input>名额的医生入驻医生端，并将医生精准绑定对应门店；</div>
          <div><span class="required">*</span>7.任一客户购买参与活动的品类，通过店员上传小票审核通过后，平台赠送<el-input v-model="formModel.checkPeopleCount"
                      placeholder="请输入检测次数"
                      class="w-200"></el-input>次检测；</div>
          <div><span class="required">*</span>8.同一活动开展期间，同一客户<el-input v-model="formModel.buyCount"
                      placeholder="请输入购买次数"
                      class="w-200">
            </el-input>次购买参与活动的品类，通过店员上传小票审核通过后，平台赠送<el-input v-model="formModel.healthCount"
                      placeholder="请输入健康风险查项目"
                      class="w-200"></el-input>项健康风险查项目；</div>

        </el-card>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="info"
                 @click="modalClose">取 消</el-button>
      <el-button type="primary"
                 @click="submitForm">保 存</el-button>
    </p>
  </el-dialog>
</template>
<script>
  export default {
    name: 'planDialog', // 权益方案管理
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        title: '新增权益方案',
        loading: false,
        formModel: {
          name: '', // 方案名称
          freeCheckCount: '',
          readCount: '',
          consultCount: '',
          marketingCount: '',
          buyCount: '',
          healthCount: '',
          doctorCount: '',
          checkPeopleCount: '',
        },
        formRules: {
          name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }]
        },
        flag: false,
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      submitForm () {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            this.allpro(this.formModel);
            if (this.flag) {
              const { data: res } = await this.post(this.api.promote.saveInviolable, this.formModel);
              if (res.code === '200') {
                this.$message.success('保存成功!');
                this.modalClose();
                this.$parent.getList();
              }
            }
          }
        })
      },
      allpro (obj) {
        var keys = [];
        var values = [];
        for (var key in obj) {
          // 只遍历对象自身的属性，而不包含继承于原型链上的属性。  
          if (obj.hasOwnProperty(key) === true) {
            keys.push(key);
            values.push(obj[key]);
          }
        }
        // 第一种方式
        /*
         * some
         * 有一项满足都会返回true
         */
        /*  if (values.some(item => item === '')) {
           this.$message.error('请完表单!');
           return
         } */
        /*
        * every
        * 只要有一项不满足条件都返回false
        */
        // 第二种方式
        this.flag = values.every(item => !!item);
        if (!this.flag) {
          this.$message.error('请完表单!');
          return
        }
        // 第三种方式
        /* for (let index = 0; index < values.length; index++) {
          const element = values[index];
          if (element === '' || element === null || element === undefined) {
            this.$message.error('请完表单!');
            return
          }
        } */
      },
      async getDetail () {
        const { data: res } = await this.post(this.api.promote.getInviolable, {
          id: this.dataObj.id
        });
        if (res.code === '200') {
          this.formModel = res.object;
        }
      }
    },
    created () {
      if (this.dataObj) {
        this.title = '编辑权益方案';
        this.getDetail();
      }
    }
  }
</script>
<style scoped lang="scss">
  .div-box {
    .required {
      color: red;
      padding-right: 5px;
    }
    /deep/ .el-input {
      margin: 8px 10px;
    }
  }
</style>